<template>
  <!-- 按钮 -->
  <div class="go_ranking" v-click-move @click="toRanking">
    <p>{{ $t('ranking.tc_competition_title') }}</p>
    <div class="rit">
      <p>
        <span>{{ $t('ranking.tc_competition_btn') }}</span>
        <NuxtImg src="/images/layout/icon-jtRight.png" />
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// TODO 跳转排行榜 
function toRanking() {
  navigateTo({ name: "ranking-ranking" });
}
</script>

<style scoped lang="scss">
.go_ranking {
  height: 1.2rem;
  flex-shrink: 0;
  background: #fd66b1;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.4rem;
  cursor: pointer;
  transition: all 0.3s ease;

  p {
    font-size: 0.38rem;
    color: var(--theme-neutral1);
    margin: 0;
  }

  .rit {
    p {
      display: flex;
      align-items: center;
      gap: 0.21rem;

      span {
        font-size: 0.44rem;
        color: #FFD1E8;
        font-weight: 500;
        transform: translateY(0.04rem);
      }

      img {
        width: 0.55rem;
      }
    }
  }
}
</style>
